import React from 'react';
import RecipeCard from './RecipeCard';

const RecipeList = ({ recipes, onRecipeDeleted, onRecipeUpdated }) => {
  return (
    <div>
      <h2 style={{ marginBottom: '20px' }}>我的食谱历史</h2>
      {(!recipes || recipes.length === 0) ? (
        <div className="card">
          <p>尚未记录食谱。从解析一个开始吧！</p>
        </div>
      ) : (
        <div style={{ display: 'grid', gap: '20px' }}>
          {recipes.map(recipe => (
            <RecipeCard 
              key={recipe.id} 
              recipe={recipe} 
              onRecipeDeleted={onRecipeDeleted}
              onRecipeUpdated={onRecipeUpdated}
            />
          ))}
        </div>
      )}
    </div>
  );
};

export default RecipeList;
